<template>
  <div>
    <div :id="id" :style="style"></div>
  </div>
</template>
<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  export default {
    props: {
      id: {
        type: String,
        default: 'chartBar'
      },
      height: {
        type: [String, Number],
        default: '400'
      },
      width: {
        type: [String, Number],
        default: '600'
      },
      chartData: {
        type: Object,
        validator: function (value) {
          return value.data && value.value;
        },
        required: true
      }
    },
    computed: {
      style: function () {
        return {width: this.width, height: this.height}
      },
      option: function () {
        return {
          color: ['#aeb01c', '#1cb060'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.optionData,
              axisTick: {
                alignWithLabel: true,
                interval: 1
              },
              axisLine: {   // 坐标轴相关
                lineStyle: {   //  坐标轴线线的颜色。
                  color: '#ffffff'
                }
              },
              axisLabel:{     //坐标轴刻度标签的相关设置。
                fontSize: 28
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              show: false,
              // interval: 25,
              // max:150,
              axisLine: {   // 坐标轴相关
                lineStyle: {   //  坐标轴线线的颜色。
                  color: '#ffffff'
                }
              },
              splitLine: { //网格线
                show: false
              },
              axisLabel:{     //坐标轴刻度标签的相关设置。
                fontSize: 28
              }
            }
          ],
          series: [
            {
              name: '成绩',
              type: 'bar',
              barWidth: '60%',
              data: this.optionValue,
              label: {
                show: true,
                position: 'top',
                fontSize:28
              },
              itemStyle: {
                color: function(params) {
                  let colorList = [
                    "#aeb01c",
                    "#1cb060"
                  ];
                  return ((params.dataIndex+ 1) % 2 === 0 ) ? colorList[1] : colorList[0];
                }
              }
            }
          ],
          animation: false,
          backgroundColor: '#092f41',
        }
      }
    },
    watch: {
      chartData: {
        handler: function (val, oldVal) {    // 监听charData，当发生变化时，触发这个回调函数绘制图表
          console.log('bar:--');
          this.optionData = val.data
          this.optionValue = val.value
          this.draw()
        },
        deep: true
      }
    },
    data() {
      return {
        myEcharts: {},
        optionData: [],
        optionValue: []
      };
    },
    methods: {
      draw() {
        // 基于准备好的dom，初始化echarts实例
        this.myEcharts = echarts.init(document.getElementById(this.id));
        // 绘制图表
        this.myEcharts.setOption(this.option)
      }
    },
    mounted() {
      // this.draw();
    }

  };
</script>
<style lang="less" scoped>
</style>
